<template>
  <view class="home">
    <div class="head">
      <div class="title">我的设备</div>
      <div class="image" @click="scancode">
        <image src="@/static/sweep.png"></image>
      </div>
    </div>
    <List ref="listRef" v-if="$token" />
    <div v-else class="content">
      <img @click="toLink" class="icon" src="@/static/yibiao.png" />
      <div>
        <div @click="toLink" class="content_title">绑定您第一台智能设备</div>
        <div @click="toLink" class="content_son_title">
          登录后按步骤扫描添加
        </div>
      </div>
      <div>
        <button class="loginBtn" open-type="getUserInfo" @click="wxLogin">
          微信快速登录
        </button>
        <button class="loginBtn loginBtn2" @click="accountLogin">
          账号密码登录
        </button>
      </div>
      <div class="button_describe">
        <u-checkbox-group v-model="checked">
          <u-checkbox name="协议"></u-checkbox>
        </u-checkbox-group>
        已阅读并同意<span @click="toUserAgreement">《用户协议和隐私政策》</span>
      </div>
    </div>
  </view>
</template>

<script>
import List from "./List.vue";
import { getOpenId, codeLogin } from "@/api/home.js";
import { mapState, mapMutations } from "vuex";
export default {
  async onPullDownRefresh() {
    await this.$refs.listRef.getList();
    uni.stopPullDownRefresh();
    setTimeout(function () {
      uni.stopPullDownRefresh();
    }, 1000);
  },
  components: {
    List,
  },
  computed: {
    ...mapState(["$token"]),
  },
  data() {
    return {
      checked: ["协议"],
      tokenValue: "",
      show: false,
    };
  },
  async mounted() {},
  methods: {
    ...mapMutations(["setUserInfo", "setToken"]),
    scancode() {
      this.$refs.listRef.scancode();
    },
    toUserAgreement() {
      uni.navigateTo({
        url: "/pages/modules/flow/userAgreement",
      });
    },
    accountLogin() {
      uni.navigateTo({
        url: "/pages/modules/login/index",
      });
    },
    toLink() {
      uni.reLaunch({
        url: "/pages/modules/flow/retrievePassword",
        success: () => {},
      });
    },
    async wxLogin() {
      if (this.checked.length > 0) {
        uni.showLoading({
          title: "加载中",
        });
        let that = this;
        try {
          wx.login({
            async success(res) {
              let code = res.code;
              if (code) {
                //发起网络请求
                let res = await codeLogin(code);
                that.setUserInfo({
                  name: res?.name,
                  account: res?.account,
                  createType: res?.createType,
                  account: res?.account,
                });
                that.setToken(res?.token);
                uni.showToast({
                  title: "登录成功！",
                  icon: "none",
                });
                uni.hideLoading();
              } else {
                uni.hideLoading();
              }
            },
          });
        } catch (error) {
          uni.hideLoading();
        }
      } else {
        uni.showToast({
          title: "请先勾选《用户协议和隐私政策》",
          icon: "none",
        });
      }
    },
  },
};
</script>

<style lang="scss">
.home {
  height: calc(100vh - 70rpx);
  width: 91vw;
  background: linear-gradient(to bottom, #a1c4fd, #c1e9fb);
  padding: 3vh 4.5vw;
  letter-spacing: 1px;
  overflow-y: auto;
  .title {
    font-weight: 600;
  }

  .content {
    height: calc(94vh - 70rpx);
    width: 100%;
    margin-top: 3vh;
    background-color: white;
    border-radius: 16rpx;
    display: flex;
    justify-content: space-around;
    flex-direction: column;
    align-items: center;
    padding-top: 60rpx;
    box-sizing: border-box;

    .icon {
      width: 180rpx;
      height: 288rpx;
    }

    .content_title {
      font-size: 32rpx;
      line-height: 40rpx;
      text-align: center;
      width: 100%;
      font-weight: 600;
    }

    .content_son_title {
      font-size: 26rpx;
      line-height: 30rpx;
      text-align: center;
      width: 100%;
      color: #999999;
      margin-top: 20rpx;
      font-weight: 200;
    }

    .loginBtn {
      width: 70vw;
      font-size: 28rpx;
      background: #00408e;
      color: #fff;
      height: 70rpx;
      line-height: 66rpx;
      letter-spacing: 2px;
      border-radius: 50rpx;
      box-shadow: 0 5px 7px 0 rgba(0, 0, 0, 0);
    }

    .loginBtn2 {
      background-color: #a1c4fd;
      margin-top: 20rpx;
    }

    .button_describe {
      display: flex;
      justify-content: flex-start;
      font-size: 26rpx;
      font-weight: 400;
      color: #c3c3c3;
      margin-top: 40rpx;
      margin-bottom: 40rpx;
    }

    .button_describe span {
      color: #00408e;
    }
  }
}

.head {
  display: flex;

  .title {
    flex: 1;
  }

  .image {
    image {
      display: inline-block;
      width: 40rpx;
      height: 40rpx;
    }
  }
}
</style>
